// Button 按钮

.btn {
	background: transparent;
	outline: none !important;
	vertical-align: middle;

	&:focus:not(.btn-elevate) {
		box-shadow: none !important;
	}
}

// 无边框&背景
.btn.btn-clean {
	border-color: transparent;
	background: transparent;
	color: e-base-color(shape, 3);

	i {
		color: e-base-color(shape, 3);
	}

	.show > &,
	&.active,
	&:active,
	&:hover {
		color: e-brand-color();
		background: e-base-color(shape, 1);

		i {
			color: e-brand-color();
		}
	}
}

// 默认
.btn.btn-default {
	background: transparent;
	color: e-base-color(label, 2);
	border: 1px solid e-base-color(grey, 3);

	i {
		color: e-base-color(shape, 3);
	}

	.show > &,
	&.active,
	&:active,
	&:hover {
		i {
			color: e-brand-color(inverse);
		}

		color: e-brand-color(inverse);
		background: e-brand-color();
		border-color: e-brand-color();
	}
}

// 状态色
@each $name, $color in ($e-state-colors) {
    .btn-#{$name} {
		@include button-variant(e-get($color, base), e-get($color, base));
		color: e-get($color, inverse);

        @if $name == light {
	        .show > &.dropdown-toggle,
		    &:focus,
			&.active,
			&:active,
			&:hover {
				background-color: e-base-color(grey, 1);
				border-color: e-base-color(grey, 1);
			}
		}

        & + .btn.dropdown-toggle {
    		position: relative;

    		&:before {
                display: block;
                content: ' ';
                border-left: 1px solid e-get($color, inverse);
                position: absolute;
                top: 3px;
                left: -1px;
                bottom: 3px;
                opacity: .3;
            }

            &:hover,
            &:focus,
            &.active {
                &:before {
                    display: none;
                }
            }
        }
    }
}

// 边框风格
@each $name, $color in $e-state-colors {
    .btn-outline-#{$name} {
        @include button-outline-variant(e-get($color, base), e-get($color, inverse));
    }
}

.btn-secondary {
	background-color: transparent;
	border: 1px solid $input-border-color;
	color: $btn-secondary-color;

	.show > &.dropdown-toggle,
	&:focus,
	&.active,
	&:active,
	&:hover {
		color: $btn-secondary-color;
		border-color: $input-border-color;
		background-color: $btn-secondary-hover-bg-color;
	}
}

// Hover 状态
@each $name, $color in $e-state-colors {

	.btn-light-hover-#{$name} {
		.show > &,
		&.active,
		&:active,
		&:hover {
			color: e-get($color, base) !important;
			background-color: rgba(e-get($color, base), .1) !important;
		}
	}

    .btn-hover-#{$name} {
    	.show > &,
	  	&.active,
	  	&:active,
	  	&:hover {
			color: e-get($color, inverse);
			background-color: e-get($color, base);
			border-color: e-get($color, base);
		}
    }

    .btn-outline-hover-#{$name} {

	  	&.btn-clean {
    		border: 1px solid transparent;		
    	}

    	.show > &,
	  	&.active,
	  	&:active,
	  	&:hover {    	
	  		color: e-get($color, base);
			border-color: e-get($color, base);
			background-color: transparent;
		}
    }
}

// 悬浮的按钮
.btn {
	&.btn-elevate {
		transition: all .3s ease 0s;

		&.btn-elevate-air {
			&:hover {
		  		transform: translate(0, -4px);
		  	}
		}
	}

	@each $name, $color in $e-state-colors {
		$base-color: e-get($color, base);

		@if $name == light {
			$base-color: #999;
		}

		&.btn-#{$name}.btn-elevate {
			box-shadow: 0 4px 16px 0 rgba($base-color,.15);

			.show > &,
			&:focus,  
			&.active,
	  		&:active,
	  		&:hover {
	  			box-shadow: 0 9px 16px 0 rgba($base-color, .25) !important;

	  			&.btn-sm {
	  				box-shadow: 0 6px 16px 0 rgba($base-color, .25) !important;
	  			}

	  			@if $name == light {
					background-color: transparent;
					border-color: transparent;
				}
	  		}
	  	}

	  	&.btn-#{$name}.btn-elevate-hover {
			.show > &,
			&.active,
			&:focus,  
	  		&:active,
	  		&:hover {
	  			box-shadow: 0 9px 16px 0 rgba($base-color, .25) !important;

	  			&.btn-sm {
	  				box-shadow: 0 6px 16px 0 rgba($base-color, .25) !important;
	  			}

	  			@if $name == light {
					background-color: transparent;
					border-color: transparent;
				}
	  		}
	  	}
	}
}

// 方形风格
.btn {
	&.btn-square {
		border-radius: 0;
	}
}

// 药丸风格
.btn {
	&.btn-pill {
		border-radius: 2rem;
	}
}

// 文字样式
.btn {
	&.btn-upper {
		text-transform: uppercase;
	}

	&.btn-bold {
		font-weight: 600;
	}

	&.btn-bolder {
		font-weight: 500;
	}

	&.btn-boldest {
		font-weight: 700;
	}

	&.btn-thin {
		font-weight: 400;
	}

	&.btn-lower {
		text-transform: lowercase;	
	}	
}

// 尺寸
.btn {
	&.btn-wide {
		padding-left: 2.25rem;
		padding-right: 2.25rem;
	}

	&.btn-wider {
		padding-left: 2.75rem;
		padding-right: 2.75rem;
	}

	&.btn-widest {
		padding-left: 3rem;
		padding-right: 3rem;
	}

	&.btn-tall {
		padding-top: .85rem;
		padding-bottom: .85rem;
	}

	&.btn-taller {
		padding-top: 1.15rem;
		padding-bottom: 1.15rem;
	}

	&.btn-tallest {
		padding-top: 1.35rem;
		padding-bottom: 1.35rem;
	}
}

// 文字大小
.btn {
	&.btn-font-sm {
		font-size: .85rem;
	}

	&.btn-font-md {
		font-size: 1rem;
	}

	&.btn-font-lg {
		font-size: 1.1rem;
	}
}

// 图标垂直居中
.btn {
	//display: inline-flex;
	align-items: center;

	@include e-icons-size((lineawesome: 1.5rem, fontawesome: 1.2rem, flaticon: 1.2rem));

	i {
		padding-right: .5rem;
		vertical-align: middle;
		line-height: 0;
	}

	&.btn-sm {
		@include e-icons-size((lineawesome: 1.3rem, fontawesome: 1rem, flaticon: 1rem));

		i {
			padding-right: .35rem;
		}
	}

	&.btn-lg {
		@include e-icons-size((lineawesome: 1.7rem, fontawesome: 1.4rem, flaticon: 1.3rem));

		i {
			padding-right: .75rem;
		}
	}
}


.btn.btn-link {
	cursor: pointer !important;

	&:focus,
	&:hover,
	&.active {
	    background-color: e-brand-color();
	    color: e-brand-color(inverse);
	}	
}

// 只有图标的按钮
.btn.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;

	&.btn-circle {
		border-radius: 50%;
	}

	i {
		padding: 0;
		margin: 0;
		line-height: 0;
	}

	[class^="socicon-"], 
	[class*=" socicon-"] {
		line-height: 1;
	}

	& {
		height: 3rem;
		width: 3rem;
	}	

	&.btn-sm {
		height: 2.5rem;
		width: 2.5rem;
	}

	&.btn-lg {
		height: 4rem;
		width: 4rem;
	}

	// 图标尺寸
	&.btn-icon-sm {
		@include e-icons-size((lineawesome: 1.25rem, fontawesome: 1.15rem, flaticon: 1.15rem));
	}

	&.btn-icon-md {
		@include e-icons-size((lineawesome: 1.3rem, fontawesome: 1.2rem, flaticon: 1.2rem));
	}

	&.btn-icon-lg {
		@include e-icons-size((lineawesome: 1.4rem, fontawesome: 1.4rem, flaticon: 1.4rem));
	}

	// 不同状态下的颜色
	@each $name, $color in $e-state-colors {
	    &.btn-#{$name} {
	        i {
	        	color: e-get($color, inverse);
	        }

	        &:focus,
	        &:hover,
	        &.active {
	        	i {
	        		color: e-get($color, inverse);
	        	}
	        }
	    }
	}
}

// 图标按钮的高度
.btn-icon-h {
	& {
		height: 3rem;
	}	

	&.btn-sm {
		height: 2.25rem;
	}

	&.btn-lg {
		height: 4rem;
	}
}

// 解决input组高度不统一问题
.input-group-append,
.input-group-prepend {
	.btn.btn-icon {
		height: auto;
	}
}

// 带加载中的按钮
.btn.btn-spinner {
	& {
		&:not(.btn-spinner-center) {
			padding-left: 3 * $input-btn-padding-x;

			&:before {
				left: $input-btn-padding-x;
			}
		}	

		// Right
		&.btn-spinner-right {
			padding-left: $input-btn-padding-x;
			padding-right: 3 * $input-btn-padding-x;

			&:before {
				left: auto;
				right: $input-btn-padding-x;
			}
		}
	}
	
	&.btn-spinner-sm {
		&:not(.btn-spinner-center) {
			padding-left: 2.5 * $input-btn-padding-x;

			&:before {
				left: $input-btn-padding-x;
			}
		}	

		// Right
		&.btn-spinner-right {
			padding-left: $input-btn-padding-x;
			padding-right: 2.5 * $input-btn-padding-x;

			&:before {
				left: auto;
				right: $input-btn-padding-x;
			}
		}
	}

	&.btn-spinner-lg {
		&:not(.btn-spinner-center) {
			padding-left: 3.5 * $input-btn-padding-x;

			&:before {
				left: $input-btn-padding-x;
			}
		}	

		// Right
		&.btn-spinner-right {
			padding-left: $input-btn-padding-x;
			padding-right: 3.5 * $input-btn-padding-x;

			&:before {
				left: auto;
				right: $input-btn-padding-x;
			}
		}
	}
}